/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, Image, Dimensions, useWindowDimensions } from 'react-native';
import {Track} from '../model';
import {
  useBreakpointValue,
  DisplayPriorityBox,
} from '@hadss/react_native_adaptive_layout/src';

interface CurPlaySongProps {
  song: Track;
}

const CurPlaySong: React.FC<CurPlaySongProps> = ({song}) => {
  const windowWidth = useWindowDimensions().width;
  let curPlayWidth = useBreakpointValue({
    base: windowWidth - 20,
    sm: windowWidth - 20,
    md: windowWidth - 20,
    lg: windowWidth - 50,
    xl: windowWidth - 50,
  });
  let curPlayPadding = useBreakpointValue({
    base: 10,
    sm: 10,
    md: 10,
    lg: 25,
    xl: 25,
  });
  const curPlaySongInfo = useBreakpointValue({
    base: 155,
    sm: 155,
    md: 155,
    lg: 384,
    xl: 384,
  });

  const displayPriorityBoxWidth = useBreakpointValue({
    base: 70,
    sm: 70,
    md: 212,
    lg: 310,
    xl: 310,
  });
  const displayPriorityBoxLeft = useBreakpointValue({
    base: 0,
    sm: 0,
    md: 0,
    lg: -350,
    xl: -600,
  });
  const iconSpace = useBreakpointValue({
    base: 0,
    sm: 0,
    md: 0,
    lg: 20,
    xl: 20,
  });
  // 若是PC或pad的时候,单独加部分的样式 Dimensions.get('screen').height >= 900 ||
  const isWide = Dimensions.get('screen').width >= 900;

  const allIcons = () => (
    <View>
      <DisplayPriorityBox
        style={{
          width: displayPriorityBoxWidth,
          flexDirection: 'row',
          justifyContent: 'space-between',
          left: displayPriorityBoxLeft,
        }}>
        {[
          {
            priority: 1,
            source: require('../../../../assets/playList/play_mode.png'),
            style: {width: 24, height: 24},
          },
          {
            priority: 1,
            source: require('../../../../assets/playList/control_left.png'),
            style: {width: 28, height: 28, right: iconSpace},
          },
          {
            priority: 10,
            source: require('../../../../assets/playList/play_icon.png'),
            style: {width: 24, height: 24},
          },
          {
            priority: 1,
            source: require('../../../../assets/playList/control_right.png'),
            style: {width: 28, height: 28, left: iconSpace},
          },
          {
            priority: 10,
            source: require('../../../../assets/playList/play_list_icon.png'),
            style: {
              width: 24,
              height: 24,
            },
          },
        ].map(({priority, source, style}, index) => (
          <View
            key={index}
            displayPriority={priority}
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              flex: 1,
              width: 25,
            }}>
            <Image source={source} style={style} />
          </View>
        ))}
      </DisplayPriorityBox>
    </View>
  );
  // 在组件中
  const [isLandscape, setIsLandscape] = useState(
    windowWidth > Dimensions.get('window').height,
  );

  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({window}) => {
      setIsLandscape(window.width > window.height);
    });
    return () => subscription.remove();
  }, []);

  return (
    <View
      style={[
        styles.curPlayContainer,
        {
          width: curPlayWidth,
          marginHorizontal: curPlayPadding,
        },
      ]}>
      <Image
        source={require('../../../../assets/playList/cover.png')}
        style={styles.albumCover}
      />
      <View style={[styles.songInfo, {width: curPlaySongInfo}]}>
        <Text style={styles.songTitle}>{song.title}</Text>
        <Text style={styles.songArtist}>{song.artist}</Text>
      </View>
      <View style={{flex: 1}} />
      <View style={{marginRight: 4}}>{allIcons()}</View>
      {isLandscape && (
        <View style={{marginRight: 8}}>
          <Image
            source={require('../../../../assets/playList/love_icon.svg')}
            style={styles.loveStyle}
          />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  curPlayContainer: {
    // flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 8,
    height: 48,
    backgroundColor: 'rgba(255, 255, 255, 1)',
    paddingRight: 20,
    bottom: 25,
    marginLeft: 8,
    marginRight: 8,
    shadowColor: 'rgba(0, 0, 0, 0.2)',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    position: 'absolute',
  },
  albumCover: {
    width: 32,
    height: 32,
    borderRadius: 4,
    marginLeft: 8,
  },
  songInfo: {
    flexDirection: 'column',
    justifyContent: 'center',
    left: 8,
  },
  songTitle: {
    fontSize: 14,
    fontWeight: '500',
    lineHeight: 19,
    color: 'rgba(0, 0, 0, 0.9)',
  },
  songArtist: {
    fontSize: 10,
    color: 'rgba(0, 0, 0, 0.4)',
    lineHeight: 13,
  },
  loveStyle: {
    width: 24,
    height: 24,
  },
});

export default CurPlaySong;
